<template>
  <div class="layout">
    <!-- <el-row type="flex" padding="20px">
      <el-col width="25%" height="100px" class="col1"> </el-col>
      <el-col
        margin="0 0 0 290px"
        width="25%"
        height="100px"
        class="col2"
      ></el-col>
    </el-row>
    <el-row padding="10px">
      <el-col margin="auto" width="50%" height="100px" class="col1"> </el-col>
    </el-row>
    <el-row type="flex" padding="20px">
      <el-col width="25%" height="100px" class="col1"> </el-col>
      <el-col
        margin="0 0 0 290px"
        width="25%"
        height="100px"
        class="col2"
      ></el-col>
    </el-row>
    <el-col width="25%" height="50px" class="col1"
      >我和下面的row同一层级</el-col
    >
    <el-row width="25%" height="50px" class="col2"
      >我和上面的col同一层级</el-row>
     -->
    <el-container>
      <el-header> header </el-header>
      <el-container>
        <el-aside width="200px">aside</el-aside>
        <el-container>
          <el-main>main</el-main>
          <el-footer>footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: "App",
  components: {},
};
</script>

<style>
.layout {
  width: 500px;
  height: 500px;
  background-color: pink;
}
.col1 {
  background-color: blue;
}
.col2 {
  background-color: skyblue;
}
</style>
